<%@page isELIgnored="false" pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<html>
<head>
    <title>Title</title>
    <script src="layui/layui.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="js/jquery-1.8.3.js"></script>
</head>
<body>
<form class="layui-form" style="display: none" id="guruForm" lay-filter="form"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <input type="hidden" name="id">
    <div class="layui-form-item">
        <label class="layui-form-label">真实名称:</label>
        <div class="layui-input-inline">
            <input type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">上师名称:</label>
        <div class="layui-input-inline">
            <input type="text" name="nickName" placeholder="请输入" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <button type="button" class="layui-btn" id="upload">
            <i class="layui-icon">&#xe67c;</i>上传图片
        </button>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">图片名称:</label>
        <div class="layui-input-inline">
            <input type="text" id="image" name="image" readonly placeholder="请先选择图片" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">单选框</label>
        <div class="layui-input-inline">
            <input type="radio" name="status" value="0" title="正常显示" checked>
            <input type="radio" name="status" value="1" title="冻结状态">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-inline">
            <button class="layui-btn" lay-submit lay-filter="submit">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<%--模糊查询 输入框及按钮  --%>
<div class="layui-form-item">
    <label class="layui-form-label">请输入上师名称:</label>
    <div class="layui-input-inline">
        <input type="text" name="name" id="name" placeholder="请输入上师名称" autocomplete="off" class="layui-input">
    </div>
</div>
<button type="button" id="button" class="layui-btn layui-btn-warm">
    查询
</button>


<table id="guru" lay-filter="guru"></table>

<script type="text/html" id="img">
    <img src="{{d.image}}"/>
</script>
<script type="text/html" id="status">
    {{# if(d.status==0){        }}
    正常显示
    {{# }else if(d.status==1){  }}
    冻结状态
    {{# }                       }}
</script>

<script type="text/html" id="head">
    <a class="layui-btn layui-btn-lg" lay-event="insert">添加</a>
    <button type="button" class="layui-btn" id="uploadExcel" lay-event="upload">
        <i class="layui-icon">&#xe67c;</i>批量上传
    </button>
    <button type="button" class="layui-btn" id="download" lay-event="download">
        <i class="layui-icon">&#xe67c;</i>批量下载
    </button>

</script>
<script type="text/html" id="body">
    <a class="layui-btn layui-btn-xs layui-form-danger" lay-event="delete">删除(状态改变)</a>
    <a class="layui-btn layui-btn-xs" lay-event="update">修改</a>
</script>
<script>
    layui.use(['table','form','upload'],function (obj) {
        var table = layui.table;
        var form = layui.form;
        var upload = layui.upload;


        //执行实例  文件上传
        var uploadInst = upload.render({
            elem: '#upload' //绑定元素
            ,url: 'article/upload' //上传接口
            ,done: function(res){
                //上传完毕回调
                $("#image").val(res.imageName);
            }
            ,error: function(){
                //请求异常回调
            }
        });
        table.render({
            elem:"#guru",
            page:true,
            url:"guru/selectAllGuru",
            limit:3,
            limits:[3,5,7],
            toolbar:"#head",
            cols:[[
                {title:"编号",field:"id"},
                {title:"真实名称",field:"name"},
                {title:"图片",templet:"#img"},
                {title:"上师名称",field:"nickName"},
                {title:"状态",templet:"#status"},
                {title:"操作栏",toolbar:"#body"},
            ]]
        })
        // ------------模糊查询------------------------
        $("#button").click(function () {
            table.reload('guru',{
                where:{
                    name:$("#name").val()
                },
                page:{
                    curr:1
                }
            })

        })
        //  ----------  表格体时间绑定---------------------
        table.on('tool(guru)',function (obj) {
            if(obj.event == 'delete'){
                layer.confirm('确定要删除?',function (index) {
                    $.ajax({
                        url:"guru/deleteGuru",
                        data:"id="+obj.data.id+"&status="+obj.data.status,
                        dataType:"json",
                        success:function (result) {
                            if(result.isDelete){
                                layer.close(index);
                                table.reload('guru');
                            }
                        }
                    })
                })
            }else if(obj.event == 'update'){
                $.ajax({
                    url:"guru/selectOneGuru",
                    data:"id="+obj.data.id,
                    dataType:"json",
                    success:function (result) {
                        form.val('form',{
                            id:result.id,
                            name:result.name,
                            image:result.image,
                            nickName:result.nickName,
                            status:result.status
                        })
                    }
                })
                layer.open({
                    title:"修改页面",
                    type:1,
                    content:$("#guruForm"),
                    area:['350px','400px']
                })
                console.log('a13')
                form.on('submit(submit)',function () {
                    console.log('aaaa13')
                    $.ajax({
                        url:"guru/updateGuru",
                        data:$("#guruForm").serialize(),
                        dataType:"json",
                        success:function (result) {
                            if(result.isUpdate){
                                layer.closeAll();
                                table.reload('guru');
                                $("#guruForm")[0].reset();
                            }
                        }
                    })
                    return false;
                })
            }
        })
        //------------------表格头事件绑定---------------------------------
        table.on('toolbar(guru)',function (obj) {
            if(obj.event == 'insert'){
                layer.open({
                    title:"添加页面",
                    type:1,
                    content:$("#guruForm"),
                    area:['350px','400px']
                })
                form.on('submit(submit)',function () {
                    $.ajax({
                        url:"guru/insertGuru",
                        data:$("#guruForm").serialize(),
                        dataType:"json",
                        success:function (result) {
                            if(result.isAdd){
                                layer.closeAll();
                                table.reload('guru');
                                $("#guruForm")[0].reset();
                            }
                        }
                    })
                    return false;
                })
            }else if(obj.event == 'download'){
                    console.log("触发事件")
                window.location.href="guru/download";
                //     $.ajax({
                //         url:"guru/download",
                //         dataType:"json",
                //         success:function (result) {
                //             layer.msg('下载成功');
                //         },
                //         error:function () {
                //             layer.msg('下载异常');
                //         }
                //     }
                // )
            // }else if(obj.event == 'upload'){
            //     //执行实例   上传excel表格
            //
            }
        })
        var uploadExcel = upload.render({
            elem: '#uploadExcel' //绑定元素
            ,url: 'guru/upload' //上传接口
            ,accept:'file'
            ,done: function(res){
                //上传完毕回调
                layer.msg('添加成功')
            }
            ,error: function(){
                layer.msg('添加异常');
                //请求异常回调
            }
        });
    })
</script>
</body>
</html>

